<template>
  <div class="v-header">
    <v-header title="我的订单">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </span>
    </v-header>
    <div class="v-main">
      <ul class="dnav g-clearfix">
        <li @click="hoverClick('tab-container1')" v-bind:class="['activeline',active=='tab-container1'?'activeli':'']">
          <span>待使用</span>
        </li>
        <li @click="hoverClick('tab-container2')" v-bind:class="['activeline',active=='tab-container2'?'activeli':'']">
          <span>进行中</span>
        </li>
        <li @click="hoverClick('tab-container3')" v-bind:class="['activeline',active=='tab-container3'?'activeli':'']">
          <span>已完成</span>
        </li>
        <li @click="hoverClick('tab-container4')" v-bind:class="[active=='tab-container4'?'activeli':'']">
          <span>退款</span>
        </li>
      </ul>
      <div class="slide_block">
        <mt-tab-container v-model="active">
          <mt-tab-container-item id="tab-container1">
            <div class="erbox" v-if="noUseList.length == 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore1" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist" :class="{'expOrder':item.status == '6'}" v-for="item in noUseList" :key="item.orderId">
                <div class="dlist">
                  <p>洗车券<span v-if="item.status == '1'" class="order_tk"  @click="orderTk(item.orderId,item.orderType)">退款</span></p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime?item.createTime.split(" ")[0]:''}}</td>
                      </tr>
                      <tr>
                        <td class="td1">有效期至：</td>
                        <td class="td2">{{item.endTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img v-if="item.status == '6'" class="expImg" src="@/assets/images/icon_ygq.png" width="80" alt="已过期">
                </div>
                <div class="tCode g-clearfix">
                  
                  <div class="code_left code_line" @click="showQode(item.matrixContent)">
                    <span>订单二维码</span>
                  </div>
                  <div class="code_left" @click="toCity(item.status)">
                    <span>网点查询</span>
                  </div>
                  
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container2">
            <div class="erbox" >没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore2" style="overflow:visible;">
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container3">
            <div class="erbox" v-if="usingList.length == 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore3" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist expOrder" v-for="item in usingList" :key="item.orderId">
                <div class="dlist">
                  <p>洗车券</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime?item.createTime.split(" ")[0]:''}}</td>
                      </tr>
                      <tr>
                        <td class="td1">使用时间：</td>
                        <td class="td2">{{item.useTime?item.useTime.split(" ")[0]:''}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img class="expImg" src="@/assets/images/icon_ywc.png" width="80" alt="已完成">
                </div>
                <div class="tCode g-clearfix">
                  <div class="code_left code_line">
                    <span>订单二维码</span>
                  </div>
                  <div class="code_left">
                    <span>网点查询</span>
                  </div>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container4">
            <div class="erbox"  v-if="usingtk.length == 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore4" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist expOrder" v-for="item in usingtk" :key="item.orderId">
                <div class="dlist">
                  <p>洗车券</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime?item.createTime.split(" ")[0]:''}}</td>
                      </tr>
                      <tr>
                        <td class="td1">有效期至：</td>
                        <td class="td2">{{item.endTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img class="expImg" src="@/assets/images/icon_ytk.png" width="80" alt="已退款">
                </div>
                <div class="tCode g-clearfix">
                  <div class="code_left code_line">
                    <span>订单二维码</span>
                  </div>
                  <div class="code_left">
                    <span>网点查询</span>
                  </div>
                </div>
              </div>
            </mt-loadmore>
          </mt-tab-container-item>
        </mt-tab-container>
        <div class="b_font">如需帮助，请拨打24小时客户专线<a href="tel:4008881768">4008881768</a></div>
      </div>

    </div>

    <div id="qrcode" ref="qrcode" v-if="!qcodeClose">
      <img src="@/assets/images/btn_close.png" @click="closeQode()" class="close_btn" alt="关闭">
      <!-- <vue-qr :logoSrc="imageUrl02" :text="codeValue" :margin="0" :size="160"></vue-qr> -->
      <qrcode-vue :size="size" level="H"  :value="value" :logo="logo" :bgColor="bgColor" :fgColor="fgColor"></qrcode-vue>
      <div class="qrcode-tips">*&nbsp;请向店员出示此二维码享受服务</div>
    </div>
    <div class="qrcode_bg" @click="closeQode()" v-if="!qcodeClose"></div>

  </div>
</template>

<script>
import vHeader from '@/components/Header.vue';
import { Resource } from '@/services/resource';
import qrcodeVue from 'qrcode-vue';
import { MessageBox, Toast } from 'mint-ui';
import imgSuncar from '@/assets/images/suncar.png';

export default {
  name: 'order',
  components: {
    vHeader,
    qrcodeVue
  },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      size: 80,
      bgColor: '#fff',
      fgColor: '#000',
      value: 'https://github.com/l-ll/qrcode-vue',
      logo: imgSuncar,
      qcodeClose: true,
      active: 'tab-container1',
      noUseList: [],
      usingList: [],
      usingtk:[]
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    // 弹窗二维码
    showQode(code_qr) {
      this.value = code_qr;
      this.qcodeClose = false;
    },
    // 关闭弹窗
    closeQode() {
      this.qcodeClose = true;
    },
    toCity(stauts){
      console.log(stauts)
      if(stauts!=6){
        this.$router.push('city');
      }
      
    },
    // 加载更多数据
    loadTop() {
      console.log('下拉刷新');
      var that = this;
      this.getOrderList().then(res => {
        console.log(res);
        Toast({ message: '更新成功', position: 'middle' });
        if (this.active === 'tab-container1') {
          that.$refs.loadmore1.onTopLoaded();
        } else if (this.active === 'tab-container2') {
          that.$refs.loadmore2.onTopLoaded();
        } else if (this.active === 'tab-container3') {
          that.$refs.loadmore3.onTopLoaded();
        }else if (this.active === 'tab-container4') {
          that.$refs.loadmore4.onTopLoaded();
        }
      });
    },
    // 获取订单列表
    getOrderList() {
      return Resource.selectOrderList
          .post({}, {needToken:true})
          .then(res => {
            if (res.head.resultCode == '000000') {//已发送
                let list = res.body || [];
                if (list.length > 0) {
                  this.noUseList = list.filter(item => item.status == '1' || item.status == '6');
                  this.usingList = list.filter(item => item.status == '5');
                  this.usingtk = list.filter(item => item.status == '7');
                }
                return res;
            }
          })
          .catch(err => {
            console.log(err);
          });
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    hoverClick(indx) {
      this.active = indx;
    },
    //  退款
    orderTk(orderId,orderType) {
      const msgBox = MessageBox({
        title: '提示',
        message: '是否确认发起退款？',
        showCancelButton: true
      });
      msgBox.then(action => {
        if (action === 'confirm') {
          Resource.refundOrder.post({}, { orderId,orderType }).then((res) => {
            if (res.head.resultCode == '000000') {//已发送
              MessageBox.alert(
                '<span style="text-align:center;display:inline-block;word-break:break-word;">尊敬的用户，您已退款成功！<br/>款项将于三个工作日内原路径返还，如有疑问请咨询客服热线<a href="tel:96999" style="color:#E40429">96999</a></span>','温馨提示'
              ).then(action => {
                if (action === 'confirm') {
                  this.active = 'tab-container4';
                  this.loadTop();
                }
              });
            }else if(res.head.resultCode == '0046'){
              MessageBox.alert(
                '<span style="text-align:center;display:inline-block;word-break:break-word;">尊敬的用户，您购买的为特价优惠券！<br/>按照规则，特价优惠不予退还，如有疑问请咨询客服热线<a href="tel:96999" style="color:#E40429">96999</a></span>','温馨提示'
              ).then(action => {});
            }else{
              MessageBox.alert(
                '<span style="text-align:center;display:inline-block;word-break:break-word;">很抱歉，发起退款失败！<br/>建议您一个小时后再试，或者直接拨打客服热线<a href="tel:96999" style="color:#E40429">96999</a>，提供手机号和订单号，进行人工退款</span>','温馨提示'
              ).then(action => {});
            }
            
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url('./order.less');
</style>
<style scoped>
.slide_block >>> .mint-loadmore-content {
  padding-bottom: 20px;
}
</style>